<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/2/9
  Time: 12:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/main.min.js"></script>
    <script type="text/javascript" src="/layui/layui.js"></script>
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <a id="addSeatbutton" class="btn btn-primary m-r-5" ><i class="mdi mdi-plus"></i> 新增</a>
                        <div class="col-xs-12 col-lg-3">
                            <select class="form-control" id="floor1" name="floor">
                                <option value="001">一楼</option>
                                <option value="002">二楼</option>
                                <option value="003">三楼</option>
                                <option value="004">四楼</option>
                                <option value="005">五楼</option>
                            </select>
                        </div>
                        <div class="col-xs-12 col-lg-3">
                            <select class="form-control" id="room1" name="room">
                                <option value="001">一号房间</option>
                                <option value="002">二号房间</option>
                                <option value="003">三号房间</option>
                                <option value="004">四号房间</option>
                                <option value="005">五号房间</option>
                            </select>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <input type="submit"  id="selectSeat" value="查询" class="btn btn-info">
                        </div>
                    </div>
                    <table class="table table-bordered" id="seatList" lay-filter="table1"></table>
                    <div id="page1"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--查看座位模板--%>
<div class="card" id="showSeat" style="display: none">
    <div class="card-body">
        <div class="form-group">
            <label class="col-md-3 control-label" >座位号</label>
            <div class="col-md-7">
                <input class="form-control" type="text" id="seatNo1" name="seatNo" readonly="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" >预约日期</label>
            <div class="col-md-7">
                <input class="form-control" type="text" id="begin1" name="begin1">
            </div>
        </div>
        <table class="table table-bordered" id="seatMsg" ></table>
    </div>
</div>
<%--座位更新模板--%>
<div id="updateSeat" style="display: none">
    <form>
        <div class="form-group">
            <label>座位编号</label>
            <input class="form-control" type="text" id="seatNo" name="seatNo" readonly="true">
        </div>
        <div class="form-group">
            <label>座位颜色</label>
            <select class="form-control" id="seatColor" name="color">
                <option value="1">红色</option>
                <option value="2">蓝色</option>
                <option value="3">绿色</option>
                <option value="4">粉色</option>
            </select>
        </div>
        <div class="form-group">
            <label>当天状态</label>
            <select class="form-control" id="nowstatue" name="nowstatue">
                <option value="0">空闲</option>
                <option value="1">已被预约（上午）</option>
                <option value="2">已被预约（下午）</option>
                <option value="3">已被预约（全天）</option>
                <option value="4">正在维修</option>
            </select>
        </div>
        <div class="form-group">
            <label>预约状态</label>
            <select class="form-control" id="seatStatue" name="statue">
                <option value="0">空闲</option>
                <option value="1">已被预约（上午）</option>
                <option value="2">已被预约（下午）</option>
                <option value="3">已被预约（全天）</option>
                <option value="4">正在维修</option>
            </select>
        </div>
        <div>
            <label>负责员工</label>
            <select class="form-control" id="teacherNo" name="teacherNo" readonly="true">

            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" type="submit" id="updateSeatButton">修改</button>
        </div>
    </form>
</div>
<%--新增座位--%>
<div id="addSeat" style="display: none">
    <form>
        <div>
            <label>负责员工</label>
            <input class="form-control" id="teacherNo1" name="teacherNo" value="${user.id}" readonly="true"/>
        </div>
        <div class="form-group">
            <label>请选择楼层</label>
            <select class="form-control" id="floor" name="floor">
                <option value="001">一楼</option>
                <option value="002">二楼</option>
                <option value="003">三楼</option>
                <option value="004">四楼</option>
                <option value="005">五楼</option>
            </select>
        </div>
        <div class="form-group">
            <label>房间号</label>
            <select class="form-control" id="room" name="room">
                <option value="001">一号</option>
                <option value="002">二号</option>
                <option value="003">三号</option>
                <option value="004">四号</option>
                <option value="005">五号</option>
            </select>
        </div>
        <div class="form-group">
            <label>座位</label>
            <input class="form-control" type="text" id="no" name="no" readonly="true">
        </div>
        <div class="form-group">
            <label>座位颜色</label>
            <select class="form-control" id="seatColor1" name="color">
                <option value="1">红色</option>
                <option value="2">蓝色</option>
                <option value="3">绿色</option>
                <option value="4">粉色</option>
            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" type="submit" id="addSeatButtons">添加</button>
        </div>
    </form>
</div>
<script type="text/html" id="toolbar1">
    <div class="btn-group">
        <button class="btn btn-primary m-r-5" lay-event="show">查看</button>
        <button class="btn btn-success m-r-5" lay-event="update">编辑</button>
        <button class="btn btn-danger" lay-event="delete">删除</button>
    </div>
</script>
<script type="text/javascript">
    layui.use(["table","layer","laydate"],function () {
        var table=layui.table;
        var layer=layui.layer;
        var laydate=layui.laydate;
        var tableIns=table.render({
            elem:'#seatList',
            skin:'row,line',
            method:"post",
            url:'/seat/selectSeatByTeacher.action',
            where:{room:"0",floor:"0"},
            limit:5,
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
                ,limits:[5,10,15]
                ,first: '首页' //不显示首页
                ,last:"尾页" //不显示尾页
            },
            skin:'nob',// 无边框风格
            size:'lg',// 大尺寸
            done:function () {
                $(".layui-table-box").css("border-width","1px");
                $(".layui-table-header tr").css("height","50px");
                $(".layui-table-header tr td").css("width","50px");
                $(".layui-table-header tr").css("background-color","white");
                $(".layui-table-header tr span").css("color","#666666");
                $(".layui-table-body tr").css("height","50px");
            },
            cols:[[
                {field:'seatNo',title:'座位编号',align:'center',width:120},
                {field:'colorName',title:'座位颜色',align:'center',width:120},
                {field:'nowstatueName',title:'当天状态',align:'center',width:160},
                {field:'statueName',title:'预约状态',align:'center',width:160},
                {field:'teacherName',title:'负责员工姓名',sort:true,align:'center',width:160},
                {field:'teacherPhone',title:'负责员工电话',align:'center'},
                {title:'操作',toolbar:"#toolbar1",align:'center'}
            ]]
        });
        $("#selectSeat").click(function () {
            tableIns.reload({
                where: {room:$("#room1").val(),floor:$("#floor1").val()}
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        })
        table.on('tool(table1)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除此座位吗', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type:"post",
                        url:"/seat/deleteSeat.action",
                        data:{seatNo:data.seatNo},
                        dataType:"json",
                        success:function (message) {
                            layer.msg(message)
                        }
                    })
                });
            } else if(layEvent === 'update') { //编辑
                $("#seatNo").val(data.seatNo);
                $("#seatColor").val(data.color);
                $("#nowstatue").val(data.nowstatue)
                $("#seatStatue").val(data.statue);
                $.ajax({
                    type:"post",
                    url:"/teacher/allteacher.action",
                    data:{type:"updateSeat"},
                    dataType: "json",
                    success:function (message) {
                        var html1;
                        for (var i = 0; i <message.length ; i++) {
                            html1+="<option value=\""+message[i].teacherNo+"\">"+message[i].teacherName+"</option>"
                        }
                        $("#teacherNo").html(html1);
                        $("#teacherNo").val(data.teacherNo)
                    }
                })
                //do something
                layer.open({
                    type:1,
                    title:"更新座位信息",
                    area: ['400px', '400px'],
                    content:$("#updateSeat")
                })
            }else if (layEvent=='show'){
                var seatNo=data.seatNo;
                $("#seatNo1").val(seatNo);
                layer.open({
                    type:1,
                    title:"查看座位预约信息",
                    area: ['1000px', '600px'],
                    content:$("#showSeat")
                })
                laydate.render({
                    elem:"#begin1"
                    ,btns: [],
                    trigger:'click',
                    theme: '#393D49',
                    done:function (value) {
                        table.render({
                            elem:'#seatMsg',
                            skin:'row,line',
                            method:"post",
                            url:'/selectSeat/selectByTime.action',
                            where:{begin1:value,seatNo: $("#seatNo1").val()},
                            limit:5,
                            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
                                ,limits:[5]
                                ,first: '首页' //不显示首页
                                ,last:"尾页" //不显示尾页
                            },
                            skin:'nob',// 无边框风格
                            size:'lg',// 大尺寸
                            done:function () {
                                $(".layui-table-box").css("border-width","1px");
                                $(".layui-table-header tr").css("height","50px");
                                $(".layui-table-header tr td").css("width","50px");
                                $(".layui-table-header tr").css("background-color","white");
                                $(".layui-table-header tr span").css("color","#666666");
                                $(".layui-table-body tr").css("height","50px");
                            },
                            cols:[[
                                {field:'selectId',title:'选座编号',align:'center',width:140},
                                {field:'studentNo',title:'用户账号',align:'center',width:180},
                                {field:'begin1',title:'预约日期',align:'center',width:160},
                                {field:'begin2Name',title:'预约时间段',align:'center'},
                                {field:'statueName',title:'选座状态',align:'center',width:160},
                            ]]
                        });
                    }
                })
            }
        });
        $("#updateSeatButton").click(function () {
            $.ajax({
                type:"post",
                url:"/seat/updateSeat.action",
                data:{seatNo:$("#seatNo").val(),color:$("#seatColor").val(),statue:$("#seatStatue").val(),nowstatue:$("#nowstatue").val(),teacherNo:$("#teacherNo").val() },
                dataType:"json",
                success:function (message) {
                    if (message.code==1){
                        layer.msg("修改成功");
                    }else{
                        layer.msg("修改失败");
                    }
                }
            })
        });
        $("#addSeatbutton").click(function () {
            $.ajax({
                type:"post",
                url:"/teacher/allteacher.action",
                data:{type:"updateSeat"},
                dataType: "json",
                success:function (message) {
                    var html1;
                    for (var i = 0; i <message.length ; i++) {
                        html1+="<option value=\""+message[i].teacherNo+"\">"+message[i].teacherName+"</option>"
                    }
                    $("#teacherNo1").html(html1);
                }
            })
            layer.open({
                type:1,
                title:"添加座位信息",
                area: ['400px', '500px'],
                content:$("#addSeat")
            })
        });
        $("#addSeatButtons").click(function () {
            $.ajax({
                type:"post",
                url:"/seat/addSeat.action",
                data:{floor:$("#floor").val(),room:$("#room").val(),no:$("#no").val(),color:$("#seatColor1").val(),teacherNo:$("#teacherNo1").val()},
                dataType:"json",
                success:function (message) {
                    if (message.code==0){
                        layer.msg("添加失败");
                    }else{
                        layer.msg("添加成功");
                    }
                }
            })
        });
        $("#room").change(function () {
            $.ajax({
                type: "post",
                url: "/seat/getAvailableSeatNumber.action",
                data: {floor: $("#floor").val(), room: $("#room").val()},
                dataType: "json",
                success: function (message) {
                    if (message.code == 0) {
                        alert("当前房间座位已满，请选择其他房间");
                    } else {
                        if (message.no == 0) {
                            $("#no").val("000");
                        } else if (message.no < 10) {
                            $("#no").val("00" + message.no);
                        } else {
                            $("#no").val("0" + message.no);
                        }
                    }
                }
            })
        });
    })
</script>
</body>
</html>
